<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <<link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<!--url('../../images/bg.jpg')-->
<body style="background:beige no-repeat; background-size: cover;">
    <div id="wrapper">
         <div style="width: 500px; margin: 150px auto; background-color:rgba(100,149,237,0.5); border-radius: 10px">
            <div style="width: 100%; height: 100px; font-size: 30px;line-height: 100px; text-align: center; color: darkblue">医院输血管理系统</div>
            <div style="margin-top: 25px; width: 100%; height: 320px;">
                <div style="width: 60%; margin: 0 auto">
                    <input v-model="user.jobnum" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%" placeholder="请输入账号">
                    <input v-model="user.password" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%; margin-top: 25px" placeholder="请输入密码">
                    <div style="margin-top: 25px; line-height: 40px">
                        <input v-model="user.code" type="text" style="border: 1px solid #ccc; padding: 10px; width: 65%; " placeholder="请输入验证码">
                        <div id="picyzm" style="display: inline-block; height: 35px; vertical-align: middle;"></div>
                    </div>

                    <button @click="login" style="height: 40px; padding: 10px; width: 100%; margin-top: 25px; background-color: steelblue; color: white">登录</button>
                    <a style="width: 100%; text-align: right; display: inline-block; margin-top: 25px; color: darkblue" href="page/end/register.html">新医生登记</a>
                </div>

            </div>
        </div>
    </div>

    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/element.js"></script>
    <script src="../../js/gVerify.js"></script>
<!--    <script src="../../js/js/login.js"></script>-->

    <script type="text/javascript">
       // login();
       let  verifyCode;

       new Vue({
           el: "#wrapper",
           data: {
               user: {
                   jobnum:"tom1",
                   password:"123",
                   code:""
               }
           },
           mounted() {

               window.addEventListener('keydown',this.keyDown);

               verifyCode = new GVerify({
                   id: "picyzm",
                   type: "blend"
               });
           },
           methods: {
               keyDown(e){
                   //如果是回车则执行登录方法
                   if(e.keyCode == 13){
                       // alert("1");
                       this.login();
                   }
               },
               login() {
                   // alert("jobnum"+this.user.jobnum);

                   if (!this.user.jobnum) {
                       this.$message({
                           message: "请输入用户名",
                           type: "error"
                       });
                       return;
                   }
                   if (!this.user.password) {
                       this.$message({
                           message: "请输入密码",
                           type: "error"
                       });
                       return;
                   }
                   // if (!this.user.code) {
                   //     this.$message({
                   //         message: "请输入验证码",
                   //         type: "error"
                   //     });
                   //     return;
                   // }
                   // let res = verifyCode.validate(this.user.code);
                   // if (!res) {
                   //     this.$message({
                   //         message: "验证码错误",
                   //         type: "error"
                   //     });
                   //     return;
                   // }
                   $.ajax({
                       url: "/user/login",
                       type: "POST",
                       contentType: "application/json",
                       data: JSON.stringify(this.user)
                   }).then(res => {

                       if (res.code === '0') {
                           this.$message({
                               message: "登录成功",
                               type: "success"
                           });
                           sessionStorage.setItem("user", JSON.stringify(res.data));
                           setTimeout(() => {
                               location.href= "/page/end/mainui.html"
                           }, 1000)
                       } else {
                           this.$message({
                               message: res.msg,
                               type: "error"
                           })
                       }
                   })
               }
           }
       })

    </script>
</body>
</html>
